<template>
  <div class="color-container">
    <div class="title">温度梯度设置</div>
    <div class="gradient"></div>
    <div class="operation">
      <div
        style="float: left"
        v-show="opLeft"
        @click="
          () => {
            this.opLeft = false;
            this.opRight = true;
          }
        "
      >
        {{ temps.start }}℃
      </div>
      <div style="float: left; height: 8px" v-show="!opLeft">
        <input
          class="iinput"
          v-model="temps.start"
          @blur="leftBlur"
        />
        ℃
      </div>
      <div
        style="float: right"
        v-show="opRight"
        @click="
          () => {
            this.opRight = false;
            this.opLeft = true;
          }
        "
      >
        {{ temps.end }}℃
      </div>
      <div style="float: right; height: 8px" v-show="!opRight">
        <input class="iinput" v-model="temps.end" @blur="rightBlur" />
        ℃
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ColorGradient",
  mounted() {
    this.genColors();
  },
  data() {
    return {
      intervals: [
        new gradientColor("#3300FF", "#00CCFF", 100),
        new gradientColor("#00CCFF", "#66FF00", 100),
        new gradientColor("#66FF00", "#FFCC33", 100),
        new gradientColor("#FFCC33", "#FF0000", 100),
      ],
      temps: {
        start: 30,
        end: 60,
      },
      opLeft: true,
      opRight: true,
    };
  },
  props: {
    // temps: {
    //   type: Object,
    //   default() {
    //     return {
    //       start: 30,
    //       end: 40,
    //     };
    //   },
    // },
  },
  methods: {
    //生成温度颜色映射表
    genColors(load) {
      this.temps = {
        start: parseInt(this.temps.start),
        end: parseInt(this.temps.end),
      };
      //获取开始颜色、结束颜色,以4等分,每一份再以100等分,温度保留两位有效数字
      let difference = this.temps.end - this.temps.start;
      let uniform = difference / 4;
      var index = 1;
      //   let result = {};
      let temps = [];
      let colors = [];
      while (index <= 4) {
        let start = this.temps.start;
        let end = start + uniform * index;
        let uniformItem = (end - start) / 100;
        var c = 1;
        while (c <= 100) {
          let interval = this.intervals[index - 1];
          let currentTemps = (start + uniformItem * c).toFixed(2);
          //   result[currentTemps] = interval[c - 1];
          temps.push(currentTemps);
          colors.push(interval[c - 1]);
          c++;
        }
        index++;
      }
      let re = { colors, temps };
      this.$emit("gradient", re, load);
      return re;
    },
    leftBlur() {
      this.opLeft = true;
      this.genColors(true);
    },
    rightBlur() {
      this.opRight = true;
      this.genColors(true);
    },
  },
};
</script>

<style scoped>
.title {
  color: white;
  margin-bottom: 5px;
  font-size: 12px;
}
.gradient {
  height: 100%;
  width: 100%;
  background-image: linear-gradient(
    to right,
    #3300ff,
    #00ccff,
    #66ff00,
    #ffcc33,
    #ff0000
  );
}
.operation {
  color: white;
  margin-top: 4px;
  font-size: 12px;
}
.iinput {
  font-size: 12px;
  color: white;
  width: 40px;
  height: 20px;
  text-align: center;
  border: 1px rgba(51, 153, 255, 0.5) solid;
  background-color: rgba(0, 0, 0, 0);
}
</style>